<template>
	<div class="buildbox"  @click="exit">
		<div class="buildbox-full" @click="e=>e.stopPropagation()">
			<div class="buildbox-full-content">
				<div class="title">
					<span class="title-head">{{label}}</span>
					<div class="exitbtn" @click="exit">×</div>
				</div>
				<div class="buildbox-wrapper">
					<el-form ref="form" :rules="rules" :model="form" label-width="90px">
					  <el-form-item label="专题名称:" prop="name">
					    <el-input v-model="form.name" placeholder="请输入模块名称"></el-input>
					  </el-form-item>
					  <el-form-item label="是否展示:">
						      <el-radio label="1" v-model="form.radio" >展示</el-radio>
						      <el-radio label="0" v-model="form.radio" >不展示</el-radio>
					    </el-form-item>
					    <el-form-item label="模块类别:">
						    <el-select v-model="form.region" :disabled="dis"  placeholder="请选择模块类别" @change="gettype()">
						      <el-option label="专题" value="1"></el-option>
						      <el-option label="分类" value="2"></el-option>
						    </el-select>
						</el-form-item>
					    <el-form-item label="监测范围:" v-show="form.region=='2'">
						  	<el-radio class="radio" v-model="form.scope" label="-1">全部</el-radio>
				  			<el-radio class="radio" v-model="form.scope" label="2">全国</el-radio>
				  			<el-radio class="radio" v-model="form.scope" label="0">本地</el-radio>
				  			<el-radio class="radio" v-model="form.scope" label="1">境外</el-radio>
						  </el-form-item>
						<el-form-item label="载体类型 :" v-show="form.region=='2'">
					    <el-checkbox-group v-model="form.checkList">
						    <el-checkbox class="w25" label="0">新闻</el-checkbox>
						    <el-checkbox class="w25" label="1">论坛</el-checkbox>
						    <el-checkbox class="w25" label="2">微博</el-checkbox>
						    <el-checkbox class="w25" label="3" >平面媒体</el-checkbox>
						    <el-checkbox class="w25" label="5" >博客</el-checkbox>
						    <el-checkbox class="w25" label="6" >贴吧</el-checkbox>
						    <el-checkbox class="w25" label="7" >其它</el-checkbox>
						    <el-checkbox class="w25" label="9" >twitter</el-checkbox>
			      			<el-checkbox class="w25" label="10">微信</el-checkbox>
						</el-checkbox-group>
					  </el-form-item>
						<!-- 专题 -->
					  <el-form-item label="专题列表:" v-show="form.region=='1'">
						  <div class="list" v-show="topics!=''">
						 	 <ul >
						 		 <li v-for="(item,i) in topics" :key="i">
									<el-radio class="radio" v-model="topicId" :label="item.id">{{item.topicName}}</el-radio>
						 		 </li>
						 	 </ul>
						  </div>
					  </el-form-item>
					  <!-- 分类 -->
					  <el-form-item label="分类关键词:" v-show="form.region=='2'">
						<div class="list" v-show="tree!=''">
							<ul >
								<li v-for="(item,index) in tree" :key="index">
										<el-radio class="radio" v-model="treeId" :label="item.id">{{item.categoryName}}</el-radio>
								</li>
							</ul>
						</div>
					  </el-form-item>
					  <div class="chose">
						  <el-form-item >
						    <el-button class="save" type="primary" @click="submitForm('form')">保存</el-button>
						    <el-button class="cancel" @click="exit" >取消</el-button>
						  </el-form-item>
					  </div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name:"buildbox",
		props: ['exit','label','data'],
		data(){
			return{
				form:{
					name:'',
					radio:'1',
					resource:'',
					scope:'-1',
					region:'1',
					checkList:['0','1','10','2','3','5','6','7','9'],
				},
				rules: {
						name: [
							{ required: true, message: '请输入模块名称', trigger: 'blur' }
					],
		    },
				topics:[],
				tree:[],
				topicId:'',
				treeId:'',
				dis:true
		  }
		},
		async mounted(){
			await this.queryCode()
			await this.queryTopic()
			await this.update()
			this.dis = false
			// this.gettype()
		},
		methods:{
			// 切换
			gettype(){
					if(this.data){
						if(this.form.region=='1'){
							this.topicId = this.data.topicId=='0' ? (this.topics!=''&&this.topics[0].id):this.data.topicId
						}else if(this.form.region=='2'){
							this.treeId = this.data.categoryId=='0' ? (this.tree!=''&&this.tree[0].id) : this.data.categoryId 
							if(!this.data.webSiteType){
								console.log("+++++")
								this.form.checkList = ['0','1','10','2','3','5','6','7','9']
								this.form.scope = '-1'
							}
						}
					}else{
						if(this.form.region=='1'){
							this.topicId = this.topics!=''&&this.topics[0].id
						}else if(this.form.region=='2'){
							this.treeId = this.tree!=''&&this.tree[0].id
						}
					}
			},
			// 修改
			update(){
				if(this.data!=''){
					this.form.name = this.data.moduleName
					this.form.radio = this.data.home+''
					this.form.region = this.data.moduleType
					this.form.scope = this.data.scope
					// 分类id
					this.treeId = this.data.categoryId
					//专题id 
					this.topicId = this.data.topicId
					if (this.data.webSiteType==-1) {
						this.form.checkList = ['0','1','10','2','3','5','6','7','9']
					}else{
						this.form.checkList = this.data.webSiteType.split(',')
					}
				}else{
					this.topicId = this.topics!=''&&this.topics[0].id
					this.treeId = this.tree!=''&&this.tree[0].id
				}
			},
			// 刷新
			increment: function () {
		      this.$emit('increment')
		    },
			async queryCode(){
				let res = await this.$http.post('vrv-monitor-platform-web/category/queryByOrgCode')
				this.tree = res.body.data
			},
			async queryTopic(){
				let res = await this.$http.get('vrv-monitor-platform-web/topic/read/list')
				this.topics = res.body.data
			},
			submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.save()
          } else {
            return false;
          }
        });
      },
			save(){
				if (this.form.region==1) {
					this.treeId =''
				}else if(this.form.region==2){
					this.topicId = ''
				}
				if(this.data!=''){
					let old = ['0','1','2','3','5','6','7','9','10']
					let webSiteType = JSON.stringify(this.form.checkList.sort())==JSON.stringify(old.sort())?-1:this.form.checkList.filter(d => d!='').join(',')
					this.$http.post('vrv-monitor-platform-web/module/update',{
						id:this.data.id,
						moduleName:this.form.name.trim(),
						moduleType:this.form.region,
						home:this.form.radio,
						scope:this.form.scope,
						webSiteType:webSiteType,
						categoryId:this.treeId,
						topicId:this.topicId
					}).then(res=>{
						if (res.body.success==true) {
							this.exit()
							this.increment()
						}else{
							this.$message.error(res.body.message)
						}
					})
				}else{
					let old = ['0','1','2','3','5','6','7','9','10']
					let webSiteType = JSON.stringify(this.form.checkList.sort())==JSON.stringify(old.sort())?-1:this.form.checkList.join(',')
					this.$http.post('vrv-monitor-platform-web/module/insert',{
						moduleName:this.form.name,
						moduleType:this.form.region,
						home:this.form.radio,
						scope:this.form.scope,
						webSiteType:webSiteType,
						categoryId:this.treeId,
						topicId:this.topicId
					}).then(res=>{
						if (res.body.success==true) {
							this.exit()
							// 刷新
							this.increment()
						}else{
							this.$message.error(res.body.message)
						}
					})
				}
			}
		},
	}
</script>
<style scoped>
	/* ::-webkit-scrollbar{
		display:none;
	} */
	.buildbox{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index:100;
		background-color:rgba(0,0,0,.5);
		transition:all .5s ease;
	}
	.buildbox .buildbox-full{
		position: absolute;
		top: 2.8rem;
		bottom: 2.8rem;
		left: 50%;
		margin-left: -18.75rem;
		width: 37.5rem;
		background: #fff;
	}
	.buildbox .title{
		height: 3.75rem;
		border: 1px solid #dcdcdc;
	}
	.buildbox .title .title-head{
		display: inline-block;
		margin-top: 0.625rem;
		margin-left: 1.25rem;
		width: 8rem;
		height: 2.4rem;
		text-align: center;
		line-height: 2.5rem;
		color: #666;
		font-size: 1.125rem;
		border: 1px solid #fff;
		border-radius: 3.125rem;
	}
	.buildbox .title .exitbtn{
		float: right;
		font-size: 1.125rem;
		color: #7a8ec4;
		font-size:2rem;
		line-height: 1.8rem;
		margin-top: 1rem;
		margin-right: 1rem;
		cursor: pointer;
	}
	.buildbox .buildbox-wrapper{
		position: absolute;
		width: 92%;
		top: 3.75rem;
		bottom: 0;
		overflow: auto;
		padding: 1.25rem 1.875rem 1.25rem 1.25rem;
	}
	.buildbox .save{
		margin-right: 6.25rem;
		background: #0267cf;
	}
	.buildbox .cancel{
		background: #eb6100;
		color: #fff;
	}
	.chose button{
		width: 7.5rem;
	}
	.list{
		border:1px solid #bfcbd9;
		border-radius: 4px;
		height: 148px;
    overflow-y: auto;
	}
	.list ul{
		margin: 0;
	}
	.list ul li{
		padding: 0 5px;
		list-style: none;
	}
	.el-select{
		width: 100%;
	}
	.w25{
		width: 20%;
		margin-left: 0!important;
	}
</style>